<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="../../resources/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <style type="text/css">
    	#template {
    		margin-left: 100px;
    	}
    	
    	.template, .template td, .template th
			{
				border:1px solid black;
			}
		.template td
			{
				text-align:center;
				width:100px;
				height:50px;
			}
		
    	.marked {
    		background-color: #dc143c;
    	}
    	
    	.regular {
    		background-color: gray;
    	}
    	
    	.nonActual {
    		background-color: lightgray;
    	}
    	
    	.tr_hover {
    		background-color: yellow;
    	}
    	
    	.temp {
    		display:none;
    	}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
			
        	$("#template").find("th").hide();
        	
        	trTemplate = $("#template").find("tr.template");
        	
        	jQuery("#dayFrame").fancybox({
                'width'             : '50%',
                'height'            : '50%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });
            //$('body').append('<table id="myTable"></table>');
			var currentTime = new Date();
            month = currentTime.getMonth()+1;
			year = currentTime.getFullYear();
            getCalendar(month,year);
            $("#monthAndYear").text(month+"/"+year);
            
            
        })
        
        function getCalendarForTheNextMonth(){
        	//$(".template nonTemp").remove();

        	if (month<12) {
        		month=month+1;
        	} else {
        		year=year+1;
        		month=1;
        	}
        	getCalendar(month,year);

        }
        
        function getCalendarForThePreviousMonth(){
        	//$(".template nonTemp").remove();

        	if (month>1) {
        		month=month-1;
        	} else {
        		year=year-1;
        		month=12;
        	}
        	getCalendar(month,year);

        }

        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate();
        }
        
        function getCalendar(month,year){
        	$.getJSON('/calendar/getData', {month:month-1 , year:year}, function(data) {
                $(".nonTemp").remove();
                var row, value, body = trTemplate.parent();
                //var month, date, year;
                var markedDays = new Array(31);
                $.each(data, function(index, value) {
                    date = $.datepicker.parseDate("yy-mm-dd", value);
                    markedDays[index] = date.getDate();
                });
                date = $.datepicker.parseDate("yy-mm-dd", year + "-" + month + "-" + 1);
                var days = daysInMonth(month, year);
                var daysInPreviousMonth = daysInMonth(month - 1, year);
                var daysInNextMonth = daysInMonth(month + 1, year);
                var day = date.getDay(); //day in the week of first day
                
                row = trTemplate.clone();
                if (day!=1){
                	row.removeClass("temp");
            		row.addClass("nonTemp");
                }
                //for first row days from previous month
                var thisDay;
                if (day==0) {
                	thisDay = day+7;
                } else {
                	thisDay = day;
                }
                
                for (i = 1; i < thisDay; i++) {
                    row.find(".day" + i).addClass("nonActual").text(daysInPreviousMonth + i - thisDay + 1);
                }

                //continue the first row
                for (i = thisDay; i < days + thisDay; i++) {

                    if (i % 7 - 1 == 0) {
                        body.append(row);
                        row = trTemplate.clone();
                        row.removeClass("temp");
                    	row.addClass("nonTemp");
                    }
                    if ($.inArray(i-day+1,markedDays)==-1){
                        row.find(".day" + (((i - 1) % 7 + 1))).addClass("regular").text(i - thisDay + 1);
                    } else {
                        row.find(".day" + (((i - 1) % 7 + 1))).addClass("marked").text((i - thisDay + 1));
                    }
                }

                //end with a few days in the next month
                for (var j = i; j % 7 - 1 != 0; j++) {
                    row.find(".day" + ((j - 1) % 7 + 1)).addClass("nonActual").text(j - i + 1);
                }

                body.append(row);
				$("#monthAndYear").text(month+"/"+year);
                // on hover))
                $(".template td").hover(
                		  function () {
                		    $(this).addClass("tr_hover");
                		  },
                		  function () {
                		    $(this).removeClass("tr_hover");
                		  }
                		);
        
                $(".template td").click(
              		  function () {
              			  var day = $(this).text().trim();
              			
              			$("#dayFrame").attr("href","/calendar/daySchedule?day="+day+"&month="+(month-1)+"&year="+year);
              		     $("#dayFrame").click();
              		  }
              		);
                $("#template").find("th").show();
            })
        };


    </script>
</head>
<body>

<table id="template">
    <thead>
    <tr>
    <th colspan="2"><input type="button" value="Предыдущий месяц" onClick="getCalendarForThePreviousMonth()"></th>
    <th colspan="3" id = "monthAndYear">Month - Year</th>
    <th colspan="2"><input type="button" value="Следующий месяц" onClick="getCalendarForTheNextMonth()"></th>
    </tr>
    <tr>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
    <th>Четверг</th>
    <th>Пятница</th>
    <th>Суббота</th>
    <th>Воскресение</th>
    </tr>
    </thead>
    <tbody>
    <tr class="template temp">
        <td class="day1"></td>
        <td class="day2"></td>
        <td class="day3"></td>
        <td class="day4"></td>
        <td class="day5"></td>
        <td class="day6"></td>
        <td class="day7"></td>
    </tr>
    </tbody>
    
    
</table>
<a id="dayFrame" style="display:none" href=""></a>


</body>
</html>